<template>
  <div class="Cardetail">
    <Head msg="汽车详情"></Head>
    <img
      src="../../public/img/icons/icon-send1.png"
      class="collect-img1"
      @click="copyurl"
    />
    <img
      :src="
        collect
          ? publicPath + 'img/icons/icon-collect-success.png'
          : publicPath + 'img/icons/icon-collect-real.png'
      "
      class="collect-img"
      @click="doCollect"
    />
    <div class="detail-main">
      <div class="detail-title">{{ goodsinfo.goods_name }}</div>
      <!--            <div class="detail-list" v-for="item in paramList">-->
      <!--                {{item.param_name}}：<span class="detail-text">{{item.param_value}}</span>-->
      <!--            </div>-->
      <div class="detail-list">
        车型年份：
        <span class="detail-text">{{ goodsinfo.setparam.year }}</span>
      </div>
      <div class="detail-list">
        外观颜色：
        <span class="detail-text">{{ goodsinfo.setparam.out_color }}</span>
      </div>
      <div class="detail-list">
        内饰颜色：
        <span class="detail-text">{{ goodsinfo.setparam.in_color }}</span>
      </div>
      <div class="detail-list">
        车辆类型：
        <span class="detail-text"
          >{{ goodsinfo.setparam.type }}-{{ goodsinfo.setparam.mold }}</span
        >
      </div>
      <div class="detail-list">
        汽车排量：
        <span class="detail-text">{{ goodsinfo.setparam.output }}</span>
      </div>
      <div class="detail-list">
        排放标准：
        <span class="detail-text">{{ goodsinfo.setparam.emission }}</span>
      </div>
      <div class="detail-list">
        车源地址：
        <span class="detail-text">{{ goodsinfo.setparam.area }}</span>
      </div>
      <div class="detail-list">
        指导价格：
        <span class="detail-text">{{ goodsinfo.market_price }}万</span>
      </div>
      <div class="detail-list">
        经销商价：
        <span class="detail-text">{{ goodsinfo.goods_price }}万</span>
      </div>
      <div class="detail-list">
        待售数量：
        <span class="detail-text">{{ goodsinfo.store_count }}</span>
      </div>
      <div class="detail-list">
        有效期限：
        <span class="detail-text"
          >{{ goodsinfo.setparam.start_time }} 至
          {{ goodsinfo.setparam.end_time }}</span
        >
      </div>
      <div class="detail-content">
        车辆配置：
        <span class="detail-text">{{ goodsinfo.setparam.setting }}</span>
      </div>
      <div class="detail-images">
        <div class="detail-images-title">车辆图片：</div>
        <div class="detail-pics">
          <img
            :key="imgs"
            @click="handleImgsClick(index)"
            v-for="(imgs, index) in images"
            :src="imgs"
          />
        </div>
      </div>
      <!--广告图-->
      <!--            <div v-if="adshow&&goodsinfo.advLip.length>0" style="position:relative">-->
      <!--                <img class="ad-close" src="../../public/img/icons/icon-error.png" @click="adclose">-->
      <!--                <cube-slide :showDots="false" ref="slide" :data="goodsinfo.advLip">-->
      <!--                    <cube-slide-item v-for="(item, index) in goodsinfo.advLip" :key="item.imgurl">-->
      <!--                        &lt;!&ndash;                    <a :href="item.url">&ndash;&gt;-->
      <!--                        <img :src="item.imgurl" @click="topage(item.type,item.type_value)">-->
      <!--                        &lt;!&ndash;                    </a>&ndash;&gt;-->
      <!--                    </cube-slide-item>-->
      <!--                </cube-slide>-->
      <!--            </div>-->

      <!--            广告-->
      <Adv
        :type="advtype"
        :value="advvalue"
        :advurl="advurl"
        :advcover="advcover"
        :advtitle="advtitle"
        :showtitle="showtitle"
      ></Adv>
      <!--            <div v-if="adshow&&goodsinfo.advLip.length>0" style="position:relative">-->
      <!--                <img class="ad-close" src="../../public/img/icons/icon-error.png" @click="adclose">-->
      <!--                <img class="ad-img" :src="goodsinfo.advLip[0].imgurl" @click="topage(goodsinfo.advLip[0].type,goodsinfo.advLip[0].type_value)"/>-->
      <!--            </div>-->
      <div class="detail-bottom">
        <div>访问量({{ goodsinfo.view }})</div>
        <div>电话咨询量({{ goodsinfo.tel_count }})</div>
        <div>预约咨询量({{ goodsinfo.dep_count }})</div>
      </div>
    </div>
    <div class="detail-foot">
      <div class="foot-btn" @click="toreport('投诉/举报')">
        <img src="../../public/img/icons/icon-Complaint.png" />
        <div>投诉/举报</div>
      </div>
      <div class="foot-btn" @click="toreport('联系客服')">
        <img src="../../public/img/icons/icon-tel.png" />
        <!--                <a :href="'tel:'+config.tel">联系客服</a>-->
        <div>联系客服</div>
      </div>
      <div class="foot-btn" @click="makeDatement">
        <img src="../../public/img/icons/icon-about.png" />
        <div>预约咨询</div>
      </div>
    </div>
    <div v-if="codeshow" class="screen"></div>
    <div v-if="codeshow" class="code-main">
      <img
        class="icon-pic"
        src="../../public/img/icons/icon-clear.png"
        @click="closereport"
      />
      <img class="service-code" :src="this.code" />
      <div class="code-title">请关注公众号后{{ codetitle }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch } from 'vue-property-decorator';
import Sence from '../sence/Sence';
import Adv from '@/components/Adv.vue';
import Head from '@/components/Head.vue';
import ImagePreview from 'cube-ui/src/components/image-preview/image-preview.vue';

@Component({
  components: {
    ImagePreview,
    Head,
    Adv,
  },
})
export default class Cardetail extends Sence {
  private publicPath: string = process.env.BASE_URL;
  public images: any = []; //图片数据
  public goodsinfo: any = {}; //商品详情数据
  public paramList: any = []; //车辆配置
  public initialIndex: number = 0; //图片索引
  public config: any = {}; //配置数据
  public adshow: boolean = true; //广告显示
  public code: string = ''; //客服二维码
  public collect: boolean = false;
  public id: any = '';
  public codeshow = false;
  public mobile: any;
  public codetitle: string = '';
  public advtype: any = ''; // 广告类别
  public advvalue: any = ''; // 广告图片
  public advurl: any = ''; // 广告链接
  public advcover: any = ''; // 广告视频封面
  public advtitle: string = ''; // 广告视频标题
  public showtitle: number = 0; // 广告视频标题是否显示

  @Watch('$route')
  private routedHandler(n: any, o: any) {
    console.log(n);
    console.log(this.$route.query);
    this.id = this.$route.query.id;
    this.getGoodsInfo();
    this.isCollect();
    this.doView();
    this.getSiteConfig();
    this.wxshare();
  }

  public mounted(): void {
    this.id = this.$route.query.id;
    this.articleDetailAdv();
    this.getGoodsInfo();
    this.isCollect();
    this.doView();
    this.getSiteConfig();
    this.wxshare();
    this.post('api/v1/getSiteConfig', {}).then((res: any) => {
      this.code = res.data.qrcode;
    });
  }

  //广告接口
  public articleDetailAdv(): void {
    this.post('api/v1/carDetailAdv', {}).then((res: any) => {
      let data = res.data;
      this.advtype = data.adv_type;
      this.advtitle = data.adv_title;
      this.showtitle = data.show_title;
      if (data.adv_type == 1) {
        this.advvalue = data.ele_id;
      } else if (data.adv_type == 2) {
        this.advvalue = data.adv_img;
        this.advurl = data.adv_img_url;
      } else if (data.adv_type == 3) {
        this.advvalue = data.adv_video;
        this.advurl = data.adv_video_url;
        this.advcover = data.adv_video_cover;
      }
    });
  }

  //获取商品详情接口
  public getGoodsInfo(): void {
    this.post('api/v1/getGoodsInfo', {
      goods_id: this.id,
    }).then((res: any) => {
      this.goodsinfo = res.data.goodsInfo;
      this.images = res.data.totalImage;
      this.paramList = res.data.paramList[0].param_list;
      this.qqPay();
      setTimeout(() => {
        (<any>this).$refs.slide.refresh();
      }, 300);
    });
  }

  //判断文章是否已收藏
  public isCollect(): void {
    if (localStorage.getItem('user')) {
      this.post('api/v1/isCollect', {
        type: 'collect',
        object_name: 'goods',
        object_id: this.id,
      }).then((res: any) => {
        this.collect = res.data.is_collect;
      });
    }
  }

  //汽车收藏
  public doCollect(): void {
    if (!localStorage.getItem('user')) {
      this.toast('请先登录！');
      return;
    }
    this.post('api/v1/doCollect', {
      type: 'collect',
      object_name: 'goods',
      object_id: this.id,
    }).then((res: any) => {
      this.isCollect();
    });
  }

  //打开图片
  public handleImgsClick(index: number) {
    this.initialIndex = index;
    const params: any = {
      $props: {
        imgs: this.images,
        initialIndex: 'initialIndex', // 响应式数据的key名
      },
      $events: {
        change: (i: number) => {
          // 必须更新 initialIndex
          this.initialIndex = i;
        },
      },
    };
    (<any>this)
      .$createImagePreview({ ...params }, (h: any) => {
        return h(
          'div',
          {
            class: {
              'image-preview-custom-header': true,
            },
            slot: 'header',
          },
          '点击任意位置关闭,长按图片保存'
        );
      })
      .show();
  }

  //阅读信息接口
  public doView(): void {
    if (localStorage.getItem('user')) {
      this.post('api/v1/doView', {
        object_name: 'goods',
        object_id: this.id,
      });
    }
  }

  //配置信息接口，手机号获取
  public getSiteConfig(): void {
    this.post('api/v1/getSiteConfig', {}).then((res: any) => {
      this.config = res.data;
    });
  }

  //预约咨询
  public makeDatement(): void {
    if (this.getuser()) {
      (<any>this)
        .$createDialog({
          type: 'prompt',
          title: '预约咨询',
          prompt: {
            placeholder: '请输入手机号',
          },
          onConfirm: (e: any, promptValue: any) => {
            this.post('api/v1/makeDatement', {
              goods_id: this.id,
              mobile: promptValue,
              weixin: '',
            }).then((res: any) => {
              this.toast('预约成功');
            });
          },
        })
        .show();
    } else {
      this.goToLogin();
    }
  }

  //举报
  public toreport(title: string): void {
    this.codetitle = title;
    this.codeshow = true;
  }

  //关闭举报
  public closereport(): void {
    this.codeshow = false;
  }

  //微信分享
  public wxshare(): void {
    this.post('api/v1/getWxShare', {
      object_type: 'goods',
      object_id: this.id,
      refer_url: this.referurl(window.location.href),
    }).then((res: any) => {
      let config: any = res.data.share_config;
      let info: any = res.data.share_info;
      (<any>window).wx.config({
        debug: config.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名
        jsApiList: config.jsApiList, // 必填，需要使用的JS接口列表
      });
      (<any>window).wx.ready(function() {
        //需在用户可能点击分享按钮前就先调用
        (<any>window).wx.onMenuShareAppMessage({
          title: info.title, // 分享标题
          desc: info.desc, // 分享描述
          link: info.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: info.imgUrl, // 分享图标
          type: '',
          success: function() {},
        });
        (<any>window).wx.onMenuShareQQ({
          title: info.title, // 分享标题
          desc: info.desc, // 分享描述
          link: info.link, // 分享链接
          imgUrl: info.imgUrl, // 分享图标
          success: function() {
            // 用户确认分享后执行的回调函数
          },
        });
      });
    });
  }

  //广告链接
  public topage(id: number, value: string): void {
    switch (id) {
      case 1:
        location.href = value;
        break;
      case 2:
        if (this.id !== value) {
          this.$router.push({ name: 'cardetail', query: { id: value } });
        }
        // this.$router.push(`/cardetail?id=${value}`);
        break;
      case 5:
        this.$router.push(`/articledetail?id=${value}`);
        break;
    }
  }

  //关闭广告
  public adclose(): void {
    this.adshow = false;
  }

  //qq分享配置
  public qqPay(): void {
    const elem1 = (<any>window).document.getElementById('name');
    const elem2 = (<any>window).document.getElementById('image');
    if (elem1) {
      elem1.parentNode.removeChild(elem1);
    }
    if (elem2) {
      elem2.parentNode.removeChild(elem2);
    }
    let oMeta1 = document.createElement('meta');
    let oMeta2 = document.createElement('meta');
    oMeta1.content = this.goodsinfo.goods_name;
    oMeta1.id = 'name';
    oMeta2.content = this.goodsinfo.goods_thumb;
    oMeta2.id = 'image';
    document.getElementsByTagName('head')[0].appendChild(oMeta1);
    document.getElementsByTagName('head')[0].appendChild(oMeta2);
    (<any>window).document
      .getElementById('name')
      .setAttribute('itemprop', 'name');
    (<any>window).document
      .getElementById('image')
      .setAttribute('itemprop', 'image');
  }

  // 复制链接
  public copyurl(): void {
    // const data: string = this.apiurl + 'dist/#' + (<any> this).$route.fullPath;
    const data: string = window.location.href;
    this.copy(data);
    this.toast('链接复制成功');
  }
}
</script>

<style scoped lang="stylus">
* {
  text-align: left;
}

.ad-close {
  position: absolute;
  top: 3px;
  right: 5px;
  width: 20px;
  height: 20px;
  z-index: 80;
}

.code-main {
  position: fixed;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60vw;
  height: 60vw;
  background: white;
}

.icon-pic {
  position: absolute;
  width: 8vw;
  height: 8vw;
  right: 1vw;
  top: 1vw;
}

.screen {
  position: fixed;
  height: 100vh;
  width: 100vw;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.3);
}

.service-code {
  width: 50vw;
  height: 50vw;
}

.code-title {
  font-size: 14px;
}

.cube-slide-item {
  > img {
    width: 100vw;
    height: 40vw;
  }
}

.collect-img {
  position: fixed;
  width: 25px;
  height: 25px;
  top: 10px;
  right: 20px;
  z-index: 100;
}

.collect-img1 {
  position: fixed;
  width: 25px;
  height: 25px;
  top: 10px;
  right: 55px;
  z-index: 100;
  /* background white */
}

.detail-foot {
  position: fixed;
  bottom: 0;
  width: 100vw;
  background: white;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 50px;
  align-items: center;
  z-index: 97;

  .foot-btn {
    display: flex;
    flex-direction: row;
    padding: 3px 5px;
    border: 1px solid #515151;
    align-items: center;

    > img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }

    > div, > a {
      color: #333;
      font-size: 14px;
    }
  }
}

.detail-main {
  min-height: calc(100vh - 45px);
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  background: #cac9c9;

  .detail-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 15px;

    > div {
      font-size: 14px;
      color: #989797;
      font-weight: bold;
    }
  }

  .ad-img {
    width: 100vw;
    min-height: 66px;
    border-bottom: 3px solid white;
  }

  .detail-title {
    padding: 10px 15px;
    line-height: 24px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 8px solid white;
  }

  .detail-list {
    height: 40px;
    line-height: 43px;
    padding: 0 15px;
    font-size: 16px;
    font-weight: bold;
    color: #989797;
    border-bottom: 3px solid white;

    .detail-text {
      color: black;
    }
  }

  .detail-content {
    padding: 8px 15px;
    line-height: 25px;
    font-size: 16px;
    font-weight: bold;
    color: #989797;
    border-bottom: 3px solid white;

    .detail-text {
      color: black;
    }
  }

  .detail-images {
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    border-bottom: 3px solid white;
  }

  .detail-images-title {
    color: #989797;
    font-weight: bold;
  }

  .detail-pics {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    > img {
      margin-top: 10px;
      width: 20vw;
      height: 15vw;
      margin-right: 10px;
    }
  }
}
</style>
